<template>
	<view class="search">
		<view class="search-container">
			<uni-search-bar @input="input" @confirm="confirmSearch()" :radius="20" bgColor="#F7F7F7" cancelButton="none"></uni-search-bar>
		</view>
		<view class="path-item">
		    <view class="titel">搜索分类：</view>
			<radio-group @change="chan" class="radio">
				<label>
					文章<radio class="radio_check" :value="'0'" checked="checked"/>
					展览<radio class="radio_check" :value="'1'"/>
					商品<radio class="radio_check" :value="'2'"/>
					艺术家<radio class="radio_check" :value="'3'"/>
				</label>
			</radio-group>
		</view>
		
		<!-- 搜索列表 -->
		<view v-if="searchList.length!=0">
			<view class="search-list" v-for="(item, index) in searchList" :key="index" >
				<uni-icons type="search" size="18" color="#C0C0C0"/>
				<view class="search-item" >
					<text @click="clickSearch(item.word)">{{item.word}}</text>
				</view>
			</view>
		</view>
		<view v-else>
			<!-- 搜索历史 -->
			<view class="history">
				<view class="history-title">
					<text>历史搜索</text>
					<uni-icons type="trash" size="20" color="#C0C0C0" @click="clearHistory"></uni-icons>
				</view>
				<view class="history-content" v-if="listLately.length!=0">
					<view class="history-item" v-for="(item, index) in listLately" :key="index">
						<text @click="clickSearch(item.word)">{{item.word}}</text>
					</view>
				</view>
				<view class="history-none" v-else>
					<text>无搜索历史</text>
				</view>
			</view>
			<!-- 搜索发现 -->
			<view class="found">
				<view class="found-title">
					<text>搜索发现</text>
					<uni-icons type="" size="20" color="#C0C0C0"></uni-icons>
				</view>
				<view class="found-content">
					<view class="found-item" v-for="(item, index) in listWord" :key="index">
						<text @click="clickSearch(item.word)">{{item.word}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="bottom"></view>
		<commonUserTabBar :currentTab="currentTab"></commonUserTabBar>
	</view>
</template>
 
<script>
import global from '@/global.js'

export default {
	data() {
		return {
			// 用户输入的关键词
			keyword:'',
			searchType:0,
			//搜索数据的数组初始化
			listWord:[],
			listLately:[],
			searchList:[
						  { id: 1, word: '搜索结果1' },
						  { id: 2, word: '搜索结果2' },
						  { id: 3, word: '搜索结果3' },
						  { id: 4, word: '搜索结果4' }
					   ],
			//搜索历史初始化
			historyList:[],
			// 初始化搜索发现列表
			foundList:['零食','平衡车','行李箱','小白鞋','毛绒玩具','连衣裙','充电宝'],
			//当前选项卡
			currentTab: '/pages/search/search',
		};
	},
	methods:{
		//用户输入时可以获取用户输入的内容
		input:function(e){
			//每次使用先清空定时器，优化
			clearTimeout(this.timer);
			this.timer=setTimeout(()=>{
				this.keyword=e
				//获取搜索数据
				this.getSearchContent()
			},500)
			console.log(e)
		},
		//获取搜索列表的方法
		async getSearchContent(){
			if(this.keyword.length==0){
				this.searchList=[];
				return
			}else{
				console.log("request  fetchData  keyword value :  " , this.keyword)
				uni.request({
					url: global.baseUrl + 'api/word/search', // 接口地址
					method:'get',
					dataType: "json",
					data:{
						keyword: this.keyword
					},
					header: {
					   'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
					},
					success: (res) => {
						if(res.data.code==0){
							console.log("res.data.data ：  ", res.data)
							this.searchList= res.data.data
						}else{
							console.log("request result error: " ,res.data.code)
							
						}
				   },
				   fail: (error) => {
						console.log(error)
				   }
				})
			}
			
		},
		chan(e) {
			this.activeRadio = e.detail.value;
			//this.activeRadio存的是选中的Value的值
			console.log("activeRadio  value  data :   " , this.activeRadio);
			this.searchType = this.activeRadio;
			console.log("searchType  value  data :   " , this.searchType);
		},
		// 保存历史记录
		saveHistory(){
			if(this.historyList.indexOf(this.keyword)==-1){
				this.historyList.unshift(this.keyword)
				// 把用户输入的内容保存到历史记录当中
				uni.setStorageSync('kw',JSON.stringify(this.historyList||'[]'))
			}				
		},
		// 清空历史记录
		clearHistory(){
			this.historyList=[]
			uni.setStorageSync('kw','[]')
			if(his.length==0){
				this.his=!this.his
			}
		},
		clickSearch(val){
			console.log("request onclick param keyword :  " ,  val )
			console.log("request onclick param searchType :  " ,  this.searchType )
			if(this.searchType==0){
				uni.reLaunch({url: '/pages/search/searchArticleList?inputs=' + val + "&type=" +  this.searchType});
			}
			
			if(this.searchType==1){
				uni.reLaunch({url: '/pages/search/searchExhibitionList?inputs=' + val + "&type=" +  this.searchType});
			}
			
			if(this.searchType==2){
				uni.reLaunch({url: '/pages/search/searchGoodsList?inputs=' + val + "&type=" +  this.searchType});
			}
			
			if(this.searchType==3){
				uni.reLaunch({url: '/pages/search/searchPainterList?inputs=' + val + "&type=" +  this.searchType});
			}
			
		},
		confirmSearch(){
			console.log("request onclick keyword param :  " ,  this.keyword )
			console.log("request onclick param searchType :  " ,  this.searchType )
			
			if(this.searchType==0){
				console.log("===========================================  0 ")
				uni.reLaunch({url: '/pages/search/searchArticleList?inputs=' + this.keyword + "&type=" +  this.searchType});
			}
			if(this.searchType==1){
				console.log("===========================================  1 ")
				uni.reLaunch({url: '/pages/search/searchExhibitionList?inputs=' + this.keyword + "&type=" +  this.searchType});
			}
			if(this.searchType==2){
				console.log("===========================================  2 ")
				uni.reLaunch({url: '/pages/search/searchGoodsList?inputs=' + this.keyword + "&type=" +  this.searchType});
			}
			if(this.searchType==3){
				console.log("===========================================  3 ")
				uni.reLaunch({url: '/pages/search/searchPainterList?inputs=' + this.keyword + "&type=" +  this.searchType});
			}
			
		},
		fetchData() {
		  console.log("request  fetchData  keyword value :  " , this.keyword)
		    uni.request({
			url: global.baseUrl + 'api/word/search', // 接口地址
			method:'get',
			dataType: "json",
			data:{
				keyword: this.keyword
			},
			header: {
			'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
			},
			success: (res) => {
				if(res.data.code==0){
					console.log("res.data.data ：  ", res.data.data)
					this.searchList=res.data.data
				}else{
					console.log("request result error: " ,res.data.code)
				}
			},
			fail: (error) => {
			  console.log(error)
			}
		  })
	},
	initData() {
		  uni.request({
			url: global.baseUrl + 'api/word/recommend', // 接口地址
			method:'get',
			dataType: "json",
			header: {
			'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
			},
			success: (res) => {
				if(res.data.code==0){
					this.listWord=res.data.data.listWord
					this.listLately=res.data.data.listLately
					
				}else{
					console.log("request result error: " ,res.data.code)
				} 
			},
			fail: (error) => {
			  console.log(error)
			}
		  })
		}
		
	},
	onLoad() {
		// 从缓存中读取历史记录
		//this.historyList=JSON.parse(uni.getStorageSync('kw'))
		this.initData()
		this.fetchData()
	}
}
</script>
 
<style lang="scss">
*{
	margin: 0;
	padding: 0;
}
.search{
	width: 100%;
	height: 100vh;
	background-color: #FFF;
	.search-container{
		width: 100%;
	}
	.search-list{
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		border-bottom: 1px solid #eee;
		margin-left: 10px;
		uni-icons{
			margin:0 20rpx;
		}
	}
	.history{
		.history-title{
			width: 90%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 0 auto;
			text{
				font-weight: bold;
				font-size: 34rpx;
			}
		}
		.history-content{
			width: 90%;
			margin: 10rpx auto;
			display: flex;
			flex-wrap: wrap;
			.history-item{
				height: 50rpx;
				line-height: 50rpx;
				background-color: #F8F8F8;
				margin-top: 10rpx;
				margin-right: 20rpx;
				padding:0 20rpx;
				border-radius: 20rpx;
			}
		}
		.history-none{
			width: 100%;
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
		}
	}
	.found{
		margin-top: 50rpx;
		.found-title{
			width: 90%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 0 auto;
			text{
				font-weight: bold;
				font-size: 34rpx;
			}
		}
		.found-content{
			width: 90%;
			margin: 10rpx auto;
			display: flex;
			flex-wrap: wrap;
			.found-item{
				height: 50rpx;
				line-height: 50rpx;
				background-color: #F8F8F8;
				margin-top: 10rpx;
				margin-right: 20rpx;
				padding:0 20rpx;
				border-radius: 20rpx;
			}
		}
	}
}
 
 .path-item{
     display: flex;
 	 background-color: #F7F7F7;
     justify-content: space-between;
     align-items: center;
     padding: 16rpx 0;
     width: 100%;
 	 height:40rpx;
     border-bottom: 2rpx solid #FFF5EE;
	 font-size: 22rpx;
	 .titel{
		 margin-left: 10px;
	 }
 }
 
 .path-item .radio{
 	 margin-right: 20px;
 }
 
 .path-item .radio_check{
 	 width: 65rpx;
 	 height:20rpx;
 }
</style>